<template>
  <view class="flex-1 flex flex-col">
    <view
      class="px-5 flex flex-col flex-1"
      v-if="settingInfo.switchCustom == 1"
    >
      <view class="pt-5 pb-[30rpx] flex justify-between items-center">
        <view class="text-black text-xl font-medium">定制列表</view>
        <view class="text-base font-medium text-theme" @click="go"
          >我要定制</view
        >
      </view>
      <template v-if="list.length">
        <view
          class="bg-white px-4 pt-[30rpx] pb-[38rpx] rounded-xl mb-5"
          v-for="item in list"
          :key="item.id"
        >
          <view class="flex justify-between items-center pb-3 bbb">
            <view class="text-black text-base font-semibold">{{
              item.travel_type
            }}</view>
            <view class="flex items-center" v-if="item.handle_status">
              <view class="text-[#6C7278] text-xs" @click="cancle(item)"
                >取消定制</view
              >
              <image
                src="@/static/right-1.png"
                class="w-[28rpx] h-[28rpx] mb-[2rpx] ml-1"
              ></image>
            </view>
          </view>
          <view class="flex flex-col justify-between ccc w-full">
            <view
              class="flex justify-between items-center flex-1 pb-3"
              :class="!i ? 'mt-3' : ''"
              v-for="(v, i) in item.travels"
              :key="i"
            >
              <view class="text-[#1A1C1E] text-base font-semibold">{{
                v.start_date.replace(/-/g, "/")
              }}</view>
              <view class="flex items-center">
                <view class="text-[##1A1C1E] text-base font-semibold">{{
                  v.start_area
                }}</view>
                <image
                  src="@/static/cusl.png"
                  class="w-[134rpx] h-2 mx-2"
                ></image>
                <view class="text-[##1A1C1E] text-base font-semibold">{{
                  v.end_area
                }}</view>
              </view>
            </view>
          </view>
          <view
            class="text-[#A4A6AB] text-xs leading-3 mt-5 text-center"
            v-if="item.handle_status == 1"
            >我们的定制师正在为你寻找合适的方案</view
          >
          <view
            class="text-[#A4A6AB] text-xs leading-3 mt-5 text-center"
            v-else-if="item.handle_status == 0"
            >您的定制方案已取消</view
          >
          <view
            v-else
            @click="handleDetail(item)"
            class="text-theme text-xs leading-3 mt-5 text-center font-medium"
            >定制师为你提供了1个方案，请点击查询</view
          >
        </view>
      </template>
      <view
        class="flex-1 flex justify-between items-center flex-col -mx-5"
        v-else
      >
        <view class="flex-1 flex items-center">
          <up-empty
            textSize="16"
            textColor="#222222"
            text="暂无定制"
            icon="/static/empty.png"
            width="101"
            height="120"
          >
          </up-empty>
        </view>
      </view>
      <view class="bg-[#F9FBFF] w-full rounded-lg px-5 pb-[72rpx] f">
        <view class="px-[2rpx] pt-[38rpx]">
          <view class="text-[#3D3D3D] text-xl">定制航线将获得</view>
          <view class="line pt-[30rpx]"></view>
        </view>
        <view class="flex justify-start mt-6">
          <image src="@/static/mm.png" class="w-[84rpx] h-[84rpx]"></image>
          <view class="flex-1 ml-[28rpx]">
            <view class="text-[#3D3D3D] text-base font-bold leading-[33rpx]"
              >航线实时优惠价格</view
            >
            <view class="text-[#7B7B7B] text-xs leading-[36rpx] mt-[18rpx]"
              >定制后，我们为您追踪航线价格，我们将根据您的需求为您筛选出专属的心仪方案</view
            >
          </view>
        </view>
        <view class="flex justify-start mt-6">
          <image src="@/static/db.png" class="w-[84rpx] h-[84rpx]"></image>
          <view class="flex-1 ml-[28rpx]">
            <view class="text-[#3D3D3D] text-base font-bold leading-[33rpx]"
              >多种方案对比</view
            >
            <view class="text-[#7B7B7B] text-xs leading-[36rpx] mt-[18rpx]"
              >我们将为您提供多种包机方案，供您选择</view
            >
          </view>
        </view>
      </view>
    </view>
    <view v-else class="w-full flex-1 h-full flex flex-col bg-white">
      <image
        class="w-full"
        mode="widthFix"
        src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/222.jpg"
      ></image>
    </view>
    <customTab value="customized" />
  </view>
</template>

<script setup lang="ts">
import { getCustoms_api, cancelCustom_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { useUserStore } from "@/stores/user.js";
import { onShow, onShareAppMessage } from "@dcloudio/uni-app";
const userStore = useUserStore();
const isLogin = computed(() => userStore.isLogin);
const settingInfo = computed(() => userStore.setting);

const list = ref([]);
const getList = () => {
  uni.showLoading();
  getCustoms_api()
    .then((res) => {
      list.value = res;
    })
    .finally(() => {
      uni.hideLoading();
    });
};
onShow(() => {
  if (isLogin.value) {
    getList();
  }
});

const cancle = (item) => {
  uni.showModal({
    title: "温馨提示",
    content: "确定取消定制吗？",
    success: (res) => {
      if (res.confirm) {
        cancelCustom_api(item.id).then(() => {
          uni.showToast({
            title: "取消定制成功",
            icon: "none",
          });
          getList();
        });
      }
    },
  });
};
const go = () => {
  if (!isLogin.value)
    return uni.showModal({
      title: "温馨提示",
      content: "请先登录后再操作",
      confirmText: "去登录",
      success: (res) => {
        if (res.confirm) {
          return uni.switchTab({
            url: "/pages/my/my",
          });
        }
      },
    });
  uni.navigateTo({
    url: "/pages/customized/myCustomized",
  });
};
const handleDetail = (item) => {
  uni.navigateTo({
    url: "/pages/customized/customizedDetail?id=" + item.id,
  });
};

onShareAppMessage(() => {
  return {
    title: "私人飞机买卖、包机、咨询，专业团队为您提供全流程服务",
    path: "/pages/customized/customized",
    imageUrl: settingInfo.value.shareImg,
  };
});
</script>

<style lang="scss" scoped>
.bbb {
  border-bottom: 2rpx solid #eff3f5;
}
.ccc {
  border-bottom: 2rpx dashed #dce4e8;
}
.line {
  border-bottom: 2rpx solid rgba(206, 215, 246, 0.43);
}
</style>
